<template>
    <div ref="pagelist">
        <my-list 
            v-for="(item,i) in list"
            :key="i"
            :pic="item.pic"
            :name="item.name"
            :aid="item.aid"
            :audio="item.audio"
            @openDialog="openDialog"
        ></my-list>
        <div>上拉加载</div>
        <my-dialogs @closeDialog="isOpen=false" :isOpen="isOpen"></my-dialogs>
    </div>
</template>
<script>
import loadScroll from '@/mixins/loadScroll';
export default {
    mixins:[loadScroll],  //先执行mixins生命周期
    data(){
        return {
            list:[],
            pagesize:10, //加载10
            isOpen:false
        }
    },
    created(){
        console.log("组件内的生命周期created")
        //获取数据
        this.getList();

    },
    mounted(){
        let scrollBox = this.$refs.pagelist.parentNode;
        this.loadScroll(scrollBox,() => {
            this.pagesize+=10;
            this.getList();
        })
    },
    methods:{
        //加载数据
        getList(){
            this.$http.getLookSongs({
                type:'getvideos',
                pagesize:this.pagesize,
                collectid:29
            }).then(res => {
                this.list = res.list.slice(1);
            }).catch(error=>{
                console.log(error)
            })
        },
        openDialog(){
            this.isOpen = true;
        }
    }
}
</script>